<template>
  <component :is="tag" v-if="!isIcon" class="base-text" :class="cssClass">
    <slot>{{ text }}</slot>
  </component>
  <VanIcon v-else class="base-text" :class="cssClass" :style="cssStyle" />
</template>

<script setup>
import { computed } from "vue";
import { formatTextColor, formatTextSize } from "@/utils/cssUtils";

let props = defineProps({
  text: String,
  color: String,
  hoverColor: String,
  size: String,
  isBold: Boolean,

  isIcon: Boolean,
  nowrap: Boolean,
  maxLine: [String, Number],
  tag: {
    type: String,
    default: "span",
  },
});

const cssClass = computed(() => {
  let result = [];

  result.push({
    "base-text--bold": props.isBold,
  });
  result.push({
    "base-text--nowrap": props.nowrap,
  });

  if (+props.maxLine > 0) {
    result.push(
      +props.maxLine === 1
        ? "van-ellipsis"
        : `van-multi-ellipsis--l${props.maxLine}`
    );
  }

  return result;
});

const fontSize = computed(() => {
  return formatTextSize(props.size);
});

const fontColor = computed(() => {
  return formatTextColor(props.color);
});

const fontHoverColor = computed(() => {
  return formatTextColor(props.hoverColor);
});
</script>

<style lang="scss" scoped>
.base-text {
  font-size: v-bind(fontSize);
  color: v-bind(fontColor);

  &:hover {
    color: v-bind(fontHoverColor);
  }

  &--bold {
    font-weight: bold;
  }
  &--nowrap {
    white-space: nowrap;
  }
}
</style>
